<!-- 卡片>日常巡检 -->
<template>
  <div class="daily-inspection">
    <div class="card-title">
      <span class="card-title-text" @click="$Ctl.enterChild('Inspection',{ orgIds: orgIds })">日常巡检</span>
    </div>
    <div class="daily-inspection-content">
      <div class="radar-animation-wrap"></div>
      <!-- 饼图 -->
      <div :id="'dailyInspectionEchart_'+getNewId" class="dailyInspectionEchart"></div>
      <div class="inspection-type">
        <div class="inspection-item notdo-unit">
          <p class="inspection-item-title">未完成{{!orgId && isMuilUnitUser ? '单位' : '点位'}}</p>
          <p class="inspection-item-num">{{notdoNum}}</p>
        </div>
        <div class="inspection-item done-unit">
          <p class="inspection-item-title">已完成{{!orgId && isMuilUnitUser ? '单位' : '点位'}}</p>
          <p class="inspection-item-num">{{doneNum}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getOrgsInspectCount, getTodayTaskInfo } from "@/api/inspectionNew"

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");

export default {
  props: {
    orgId: {
      default() {
        return false
      }
    }
  },
  data() {
    return {
      myChart: {},
      doneNum: "0", // 已完成单位
      notdoNum: "0", // 未完成单位
      echartsnotdoNum: "0",
      echartsdoneNum: "0",
      orgIds:this.orgId || this.$store.state.userInfo.organizationIds,
      getNewId: (new Date()).getTime(),
      isMuilUnitUser:this.$store.state.userInfo.isMuilUnitUser//0:单单位用户;1:多单位用户
    };
  },
  created() {
    let that = this
    if(!that.orgId && that.isMuilUnitUser) {
      that.getMultipleUnitsData()
    } else {
      that.getSingleUnitData()
    }
    
    if(!that.isMuilUnitUser || (that.isMuilUnitUser && !that.orgId)){//推送只推一级首页
      window.FunList.orgsDailyInspect_ws = function(wsData){
        that.setData(wsData,1) 
      }
      window.FunList.sigeleOrgDailyInspect_ws = function(wsData){
        that.setData(wsData) 
      }
    }
  },
  methods: {
    // 多单位获取数据
    getMultipleUnitsData() {
      let that = this
      getOrgsInspectCount({
        orgIds: that.orgIds,
        timeType: 1
      }).then(res => {
        // 巡检单位
        that.setData(res.data,1)
      })
    },
    // 单单位获取数据
    getSingleUnitData() {
      let that = this
      getTodayTaskInfo({
        orgId: that.orgIds
      }).then(res => {
        // 巡检点位
        that.setData(res.data)
      })
    },
    setData(data,type){
      let that = this
      if(type===1){// 巡检单位
        that.notdoNum = data.unfinishCount;
      }else{// 巡检点位
        that.notdoNum = data.pointCount - data.finishCount
      }
      that.doneNum = data.finishCount;
      if(that.notdoNum == null && that.doneNum == null){
        that.notdoNum=0;
        that.doneNum=0;
      }
      that.$nextTick(() => {
        that.initEchart(that.notdoNum,that.doneNum);
      })
    },
    // 初始化图标
    initEchart(notdoNum,doneNum) {
      let that = this
      let doneColor = '#9EF793'
      let notdoneColor = "#BAC1C3"
      let option = {
        tooltip: {
          show: true,
          position: ["28%", "40%"],
          formatter: "{b} : {c}"
        },
        // graphic: [
        //   {
        //     type: 'image',
        //     left: 'center',
        //     top: 'center',
        //     style: {
        //       image: '',
        //       textAlign: 'center',
        //       width: 60,
        //       height: 60,
        //     }
        //   }
        // ],
        series: [
          {
            name: "消防巡检",
            type: "pie",
            radius: [55, 60],
            color: doneColor,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              {
                value: that.doneNum,
                name: "已完成数量"
              },
              {
                value: that.notdoNum,
                name: "未完成数量",
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          },
          {
            type: "pie",
            radius: [51, 55],
            color: notdoneColor,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              {
                value: that.doneNum,
                name: "已完成数量",
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: that.notdoNum,
                name: "未完成数量"
              }
            ]
          }
        ]
      };
      let option1 = {
        tooltip: {
          trigger: "无任务",
          formatter: "本期无任务"
        },
        series: [
          {
            name: "本期无数据",
            type: "pie",
            radius: [41, 45],
            color: notdoneColor,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [{ value: 0, name: "本期无任务" }]
          }
        ]
      };
      let $dom = document.getElementById('dailyInspectionEchart_'+that.getNewId);
      if($dom){
        this.myChart = Echarts.init($dom);
        this.myChart.setOption((that.notdoNum!=0 || that.doneNum!=0)?option:option1)
      }
    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.daily-inspection {
    height: 100%;
    width: 100%;
    .daily-inspection-content {
        position: relative;
        display: flex;
        padding-top: 20px;
        height: calc(100% - 32px);
        .radar-animation-wrap {
          position: absolute;
          top: calc(50% - 1.05em);
          left: calc(25% - 1.4em);
          width: calc(1em + 1.8em);
          height: calc(1em + 1.8em);
          font-size: 28px;
          background: 
            linear-gradient(
              45deg,
              transparent 49%,
              rgba(191,229,250,.3) 49%,
              rgba(191,229,250,.3) 51%,
              transparent 51%),
            linear-gradient(
              135deg,
              transparent 49%,
              rgba(191,229,250,.3) 49%,
              rgba(191,229,250,.3) 51%,
              transparent 51%),
            repeating-radial-gradient(
              transparent 0, 
              transparent 0.40em, 
              rgba(191,229,250,.3) 0.42em, 
              rgba(191,229,250,.3) .45em),
            linear-gradient(rgba(203,234,250,.1), rgba(83, 180, 244,.1));
          border-radius: 50%;
          &::before {
            content: '';
            position: absolute;
            width: 1.35em;
            height: 1.35em;
            top: 0.01em;
            left: 0.02em;
            border-right: 2px solid #59c2f6;
            background: linear-gradient(
                45deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(54, 108, 143, 1) 100%
              );
            border-radius: 100% 0 0 0;
            animation: 
                scaning 5s linear infinite;
            transform-origin: 100% 100%;
          }
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -4px;
            margin-top: -4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #59c2f6;
          }
        }
        .dailyInspectionEchart {
            width: 50%;
            height: 100%;
        }
        .inspection-type {
            padding-left: 20px;
            width: 50%;
            .inspection-item {
                height: 50%;
                .inspection-item-title {
                    padding-top: 5px;
                    color: #A3BEDD;
                    font-size: 18px;
                }
                .inspection-item-num {
                    font-size: 28px;
                    font-weight: bold;
                }
            }
            .inspection-item-num {
                font-size: 28px;
            }
        }
        .notdo-unit {
            color: #fff;
        }
        .done-unit {
            color: #6bbd97;
        }
    }
}

</style>